{extend name="layouts/main" /}
{block name="link"}{/block}
{block name="css"}
<style>
	.navy-bg {
		background-color: #1ab394;
		color: #ffffff;
	}

	.widget {
		border-radius: 5px;
		padding: 15px 20px;
		margin-bottom: 10px;
		margin-top: 10px;
	}
	.red-bg {
		background-color: #ed5565;
		color: #ffffff;
	}
	.blue-bg {
		background-color: #1c84c6;
		color: #ffffff;
	}
	.lazur-bg {
		background-color: #23c6c8;
		color: #ffffff;
	}

	.layui-col-md6 {
		width: 50%;
		padding-right: 10px;
	}
	.panel-heading {
		padding: 10px 15px;
		border-bottom: 1px solid transparent;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	.panel-body {
		padding: 0px 15px 15px 15px;
	}
	.text-info {
		color: #23c6c8;
	}
	.table {
		width: 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}
	table {
		background-color: transparent;
	}
	table {
		border-spacing: 0;
		border-collapse: collapse;
	}
	table {
		display: table;
		border-collapse: separate;
		border-spacing: 2px;
		border-color: grey;
	}
	thead {
		display: table-header-group;
		vertical-align: middle;
		border-color: inherit;
	}
	tr {
		display: table-row;
		vertical-align: inherit;
		border-color: inherit;
	}
	table,table tr th, table tr td { border:1px solid #DCDCDC; }
	table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}
</style>
{/block}
{block name="content"}
<div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
	<div class="layui-body layui-tab-content site-demo site-demo-body" style="top: 0px;left: 0px;">
		<div class="layui-tab-item layui-show">
			<div class="layui-main">
				<div id="LAY_preview">
					<div class="layui-fluid" style="position: relative;margin: 0 auto;padding: 0 0px;">
						<div class="layui-card" style="overflow-y: hidden;">
							<div class="layui-row">
								<div class="layui-xs12">
									<div class="layui-row">
										<div class="layui-col-md6">
											<!--statistics start-->
											<div class="layui-row state-overview">
												<div class="layui-col-md6 layui-col-xs12 layui-col-sm6">
													<div class="panel widget style1 navy-bg" style="margin-top: 2px;padding: 32px 20px;">
														<div class="symbol"> <i class="fa fa-eye"></i> </div>
														<div class="state-value">
															<div class="value">{$visit['pv']}</div>
															<div class="title"><B>浏览量(PV)</B></div>
														</div>
													</div>
												</div>
												<div class="layui-col-md6 layui-col-xs12 layui-col-sm6">
													<div class="panel widget style1 red-bg" style="margin-top: 2px;padding: 32px 20px;">
														<div class="symbol"> <i class="fa fa-users"></i> </div>
														<div class="state-value">
															<div class="value">{$visit['alone']}</div>
															<div class="title"><B>独立访客(UV)</B></div>
														</div>
													</div>
												</div>
											</div>
											<div class="layui-row state-overview">
												<div class="layui-col-md6 layui-col-xs12 layui-col-sm6">
													<div class="panel widget style1 blue-bg" style="padding: 32px 20px;">
														<div class="symbol"> <i class="fa fa-money"></i> </div>
														<div class="state-value">
															<div class="value">{$visit['ip']}</div>
															<div class="title"><B>独立IP(IP)</B></div>
														</div>
													</div>
												</div>
												<div class="layui-col-md6 layui-col-xs12 layui-col-sm6">
													<div class="panel widget style1 lazur-bg" style="padding: 32px 20px;">
														<div class="symbol"> <i class="fa fa-eye"></i> </div>
														<div class="state-value">
															<div class="value">{$visit['sumpv']}</div>
															<div class="title"><B>总浏览量</B></div>
														</div>
													</div>
												</div>
											</div>
											<!--statistics end-->
										</div>
										<div class="layui-col-sm6">
											<!--more statistics box start-->
											<div class="panel">
												<div class="panel-body">
													<div id="edata" style="height: 230px; width: 100%;"></div>
												</div>
											</div>
											<!--more statistics box end-->
										</div>
									</div>
									<div class="layui-row">
										<div class="layui-col-sm12">
											<section class="panel">
												<section class="panel">
													<header class="panel-heading">
														网站访问量概况
														<span class="pull-right">
															<a href="javascript:;" layuimini-content-href="{:url('allstats');}" class="text-success"  style='font-size:16px;font-weight: bold;' data-title="查看全部" data-icon="fa fa-gears">查看全部 >></a>
														</span>
													</header>
													<div class="panel-body">
														<table class="table table-striped text-info layui-table">
															<thead class="panel-heading dark">
																<tr>
																	<th></th>
																	<th>PV</th>
																	<th>独立访客</th>
																	<th>IP</th>
																	<th>人均浏览次数</th>
																</tr>
															</thead>
															<tbody>
																<tr style='color:red;font-weight: bold;'>
																	<td>今日</td>
																	<td>{$visit['pv']}</td>
																	<td>{$visit['alone']}</td>
																	<td>{$visit['ip']}</td>
																	<td>{$visit['avg']}</td>
																</tr>
																<tr style='color:red;font-weight: bold;'>
																	<td>昨日</td>
																	<td>{$yvisit['pv']}</td>
																	<td>{$yvisit['alone']}</td>
																	<td>{$yvisit['ip']}</td>
																	<td>{$yvisit['avg']}</td>
																</tr>
																<tr>
																	<td>每日平均</td>
																	<td>{$dayavg['avgpv']}</td>
																	<td>{$dayavg['avgalone']}</td>
																	<td>{$dayavg['avgip']}</td>
																	<td></td>
																</tr>
																<tr>
																	<td>历史最高</td>
																	<td>{$histheight['heigpv']}</td>
																	<td>{$histheight['heigalone']}</td>
																	<td>{$histheight['heigip']}</td>
																	<td></td>
																</tr>
																<tr>
																	<td>历史累计</td>
																	<td>{$histcount['sumpv']}</td>
																	<td>{$histcount['sumalone']}</td>
																	<td>{$histcount['sumip']}</td>
																	<td></td>
																</tr>
																<tr><td colspan='5'> </td></tr>
															</tbody>
														</table>
													</div>
												</section>
											</section>
										</div>
									</div>
									<div class="layui-row">
										<div class="layui-col-sm12">
											<section class="panel">
												<header class="panel-heading"><b>24小时流量趋势</b></header>
												<div class="panel-body">
													<div id="main" style="height:400px; width:100%;"></div>
												</div>
											</section>
										</div>
									</div>
									<!-- PAGE CONTENT ENDS -->
								</div><!-- /.col -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="js"}
<script src="__STATIC__/addons/stats/echarts/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.getElementById('main'));
     // console.log("{$timeData}");
     var timeStr = <?php echo $timeData;?>;
     var sum_pv = <?php echo $sum_pv;?>;
     var sum_ip = <?php echo $sum_ip;?>;
     var sum_al = <?php echo $sum_al;?>;
     var etitle = <?php echo $echdata["etitle"];?>;
     var edata = <?php echo $echdata["edata"];?>;
     console.log(timeStr);
    // 指定图表的配置项和数据
    var timeData = timeStr
    var  option = {
    	title: {
    		text: " ",
    		x: "left"
    	},
    	tooltip: {
    		trigger: "axis",
    	},
    	legend: {
    		x: 'center',
    		data: ["PV", "IP", "独立访客"]
    	},
    	xAxis: [
    	{
    		type: "category",
    		name: "",
    		splitNumber:24,
    		boundaryGap: false,
    		splitLine: {show: false},
    		data: timeData
    	}
    	],
    	yAxis: [
    	{
    		type: "value",
    		name: "",
    		min: '0'
    	}
    	],
    	toolbox: {
    		show: true,
    		feature: {
    			mark: {
    				show: true
    			},
    			dataView: {
    				show: true,
    				readOnly: true
    			},
    			restore: {
    				show: true
    			},
    			saveAsImage: {
    				show: true
    			}
    		}
    	},
    	calculable: true,
    	series: [
    	{
    		name: "PV",
    		type: "line",
    		smooth:true,
    		data: sum_pv
    	},
    	{
    		name: "IP",
    		type: "line",
    		smooth:true,
    		data: sum_ip
    	},
    	{
    		name: "独立访客",
    		type: "line",
    		smooth:true,
    		data: sum_al
    	}
    	]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('edata'));
    // 指定图表的配置项和数据
    var option2 = {
    	title : {
    		text: '访问来源',
    		textStyle:{
    			fontSize:14
    		},
    		x:'left'
    	},
    	tooltip : {
    		trigger: 'item',
    		formatter: "{a} <br/>{b} : {c} 次 ({d}%)"
    	},
    	legend: {
    		orient: 'vertical',
    		left: 'right',
    		data: etitle
    	},
    	series : [
    	{
    		name: '访问来源',
    		type: 'pie',
    		right: '50%',
    		radius : '55%',
    		center: ['40%','50%'],
    		radius:  [0, '80%'],
    		data: edata,
    		itemStyle: {
    			emphasis: {
    				shadowBlur: 10,
    				shadowOffsetX: 0,
    				shadowColor: 'rgba(0, 0, 0, 0.5)'
    			}
    		}
    	}
    	]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);
</script>
{/block}